<template>
    <div class="table">
        <div class="btn_box">
            <el-button icon="el-icon-plus" type="primary" @click="addTask"
                >添加升级任务</el-button
            >
            <el-dropdown
                v-if="firstData.length > 0"
                @command="
                    command => {
                        downloadJar(command, null)
                    }
                "
            >
                <el-button type="primary">
                    下载最新升级包<i
                        class="el-icon-arrow-down el-icon--right"
                    ></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                        v-for="(item, index) in firstData"
                        :key="index"
                        :command="index"
                        >{{ item.jarKey }}包</el-dropdown-item
                    >
                </el-dropdown-menu>
            </el-dropdown>
            <el-button @click="clickTips" v-else type="primary">
                下载最新升级包<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
        </div>
        <el-table
            :data="tableData"
            header-cell-class-name="table_title"
            :header-cell-style="{ color: '#fff', textAlign: 'center' }"
            :row-class-name="tabRowClassName"
            style="width: 100%"
            max-height="600"
        >
            <el-table-column prop="upgradeCode" label="升级编码" width="180">
            </el-table-column>
            <el-table-column prop="upgradeInfo" label="升级内容">
                <template slot-scope="scope">
                    <div class="upgradeInfo">
                        {{ scope.row.upgradeInfo }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="areaName" label="省份" width="260">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="50">
                <template slot-scope="scope">
                    {{ scope.row.status == 1 ? '草稿' : '发布' }}
                </template>
            </el-table-column>
            <el-table-column prop="type" label="发布类型" width="80">
                <template slot-scope="scope">
                    {{ scope.row.type == 1 ? '定时发布' : '主动发布' }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="410">
                <template slot-scope="scope">
                    <div class="operation_box">
                        <el-button
                            type="primary"
                            size="mini"
                            @click="lookTable(scope.row)"
                            >查看升级记录</el-button
                        >
                        <el-button
                            v-if="scope.row.status == 1"
                            type="primary"
                            size="mini"
                            @click="released(scope.row, 2)"
                            >立即发布</el-button
                        >
                        <el-button
                            v-else
                            type="primary"
                            size="mini"
                            @click="released(scope.row, 1)"
                            >取消发布</el-button
                        >
                        <el-button
                            type="primary"
                            size="mini"
                            @click="editTask(scope.row)"
                            >编辑</el-button
                        >

                        <el-button
                            v-if="
                                !scope.row.tomcatJar &&
                                !scope.row.tongWebJar &&
                                !scope.row.tongWebWar &&
                                !scope.row.vuePackage &&
                                scope.row.showDownBtn
                            "
                            type="primary"
                            size="mini"
                            @click="clickTips"
                        >
                            下载升级包<i
                                class="el-icon-arrow-down el-icon--right"
                            ></i>
                        </el-button>
                        <template v-else>
                            <el-dropdown
                                v-if="scope.row.showDownBtn"
                                @command="
                                    command => {
                                        downloadJar(command, scope.row)
                                    }
                                "
                            >
                                <el-button type="primary" size="mini">
                                    下载升级包<i
                                        class="el-icon-arrow-down el-icon--right"
                                    ></i>
                                </el-button>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item
                                        command="1"
                                        v-if="scope.row.tomcatJar"
                                        >tomcatJar包</el-dropdown-item
                                    >
                                    <el-dropdown-item
                                        command="2"
                                        v-if="scope.row.tongWebJar"
                                        >tongWebJar包</el-dropdown-item
                                    >
                                    <el-dropdown-item
                                        command="4"
                                        v-if="scope.row.tongWebWar"
                                        >tongWebWar包</el-dropdown-item
                                    >
                                    <el-dropdown-item
                                        command="3"
                                        v-if="scope.row.vuePackage"
                                        >vue包</el-dropdown-item
                                    >
                                </el-dropdown-menu>
                            </el-dropdown>
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination
            :total="total"
            :page.sync="formItem.pageNu"
            :limit.sync="formItem.pageSi"
            @pagination="getList"
        />
        <addTaskDialog
            :upgradeMsg="upgradeMsg"
            :title="title"
            @close="addTaskVisible = false"
            :visible="addTaskVisible"
            v-if="addTaskVisible"
            @getList="getList"
            :type="type"
            :editForm="editForm"
        />
        <upgradeDialog
            @close="tableUpgradeVisible = false"
            :visible="tableUpgradeVisible"
            v-if="tableUpgradeVisible"
            title="查看升级任务"
            :rowData="rowData"
        />
    </div>
</template>

<script>
import addTaskDialog from '@/components/tableDialog/index'
import upgradeDialog from '@/components/tableDialog/upgrade.vue'
import {
    createUpgradeCode,
    upgradeList,
    getPackageList,
    getUpgradeDetails,
    editUpgradeStatus
} from '@/api/task'
import Pagination from '@/components/Pagination/index'
import { MessageBox, Loading } from 'element-ui'
export default {
    name: 'upgradeTable',
    components: {
        addTaskDialog,
        Pagination,
        upgradeDialog
    },
    data() {
        return {
            tableData: [],
            total: 0,
            title: '',
            editForm: {},
            formItem: {
                pageNu: 1, //页码值
                pageSi: 10 //页面大小
            },
            type: '', //类型 1新增  2编辑
            upgradeMsg: '', //升级编号
            addTaskVisible: false, //升级任务
            tableUpgradeVisible: false, //查看任务升级列表
            rowData: {},
            firstData: {} //列表第一天数据
        }
    },
    created() {
        this.getList()
    },
    mounted() {},
    methods: {
        clickTips() {
            this.$Message({
                text: '暂无下载包数据',
                type: 'warning'
            })
        },
        downloadFile(url, fileName) {
            let loadingInstance = Loading.service({
                lock: true,
                text: '正在处理中...',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            })
            fetch(url) //js 方法
                .then(response => response.blob())
                .then(blob => {
                    loadingInstance.close()
                    const url = window.URL.createObjectURL(blob)
                    const a = document.createElement('a') //利用a标签的特性下载
                    a.href = url
                    a.download = fileName // 设置下载的文件名，可以根据需求修改
                    document.body.appendChild(a)
                    a.click()
                    window.URL.revokeObjectURL(url)
                    document.body.removeChild(a)
                })
                .catch(error => {
                    loadingInstance.close()
                    this.$Message({
                        text: '下载文件时出错！',
                        type: 'error'
                    })
                })
        },
        // 获取url
        switchUrl(command, row) {
            let url, fileName
            switch (command) {
                case '1':
                    url = row.tomcatJar
                    fileName = 'tomcatJar'
                    break
                case '2':
                    url = row.tongWebJar
                    fileName = 'tongWebJar'
                    break
                case '3':
                    url = row.vuePackage
                    fileName = 'vuePackage'
                    break
                case '4':
                    url = row.tongWebWar
                    fileName = 'tongWebWar'
                    break
            }
            return {
                url,
                fileName
            }
        },
        downloadJar(command, row) {
            console.log(command, row)
            let url, fileName
            // 获取url
            if (row) {
                url = this.switchUrl(command, row).url
                fileName = this.switchUrl(command, row).fileName
            } else {
                url = this.firstData[command].jarValue
            }
            console.log(url)
            let suffix = url.split('/')[url.split('/').length - 1].split('.')
            suffix = suffix = suffix[suffix.length - 1]
            if (!row) {
                fileName = `${this.firstData[command].jarKey}.` + suffix
            }
            const a = document.createElement('a')
            a.style.display = 'none'
            if (
                suffix == 'zip' ||
                suffix == 'rar' ||
                suffix == 'jar' ||
                suffix == 'war'
            ) {
                window.open(url)
            } else {
                this.downloadFile(url, fileName)
            }
        },
        released(row, type) {
            // type  2 立即发布
            MessageBox.confirm(
                `是否${type == 2 ? '立即发布' : '取消发布'}${
                    row.areaName
                }系统?`,
                '提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }
            ).then(() => {
                editUpgradeStatus({
                    id: row.id, //升级任务ID
                    upgradeCode: row.upgradeCode, //升级编号
                    status: type //状态 1草搞 2发布
                }).then(res => {
                    if (res.code == 200) {
                        this.$Message({
                            text: res.msg,
                            type: 'success'
                        })
                        this.getList()
                    }
                })
            })
        },
        // 查看升级记录
        lookTable(row) {
            this.tableUpgradeVisible = true
            this.rowData = row
        },
        getList() {
            upgradeList(this.formItem).then(res => {
                if (res.rows.length > 0) {
                    res.rows.forEach((item, index) => {
                        if (index == 0 || index == 1) {
                            item.showDownBtn = true
                        } else {
                            item.showDownBtn = false
                        }
                    })
                    this.tableData = res.rows || []
                    console.log(this.tableData)
                    this.total = res.total || 0
                }
            })

            getPackageList().then(res => {
                if (res.code == 200) {
                    this.firstData = res.data
                }
            })
        },
        // 编辑
        editTask(row) {
            this.type = 2
            this.title = '编辑升级任务'
            getUpgradeDetails({
                upgradeCode: row.upgradeCode
            }).then(res => {
                this.editForm = res.data
                this.addTaskVisible = true
            })
        },
        tabRowClassName(row) {
            if (row.rowIndex % 2 == 0) {
                return 'row1'
            } else {
                return 'row2'
            }
        },
        submitForm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    alert('submit!')
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        resetForm(formName) {
            this.$refs[formName].resetFields()
        },
        handleClose() {},
        addTask() {
            this.type = 1
            this.title = '添加升级任务'
            createUpgradeCode()
                .then(res => {
                    if (res.code == 200) {
                        this.upgradeMsg = res.msg
                        this.addTaskVisible = true
                    } else {
                        this.$Message({
                            text: response.msg,
                            type: 'error'
                        })
                    }
                })
                .catch(err => {
                    // this.$message('123')
                })
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-dropdown {
    margin-left: 10px;
}
.upgradeInfo {
    height: auto; /* 设置行高 */
    max-height: 150px;
    overflow-y: auto;

    &::-webkit-scrollbar-thumb {
        //滚动条的设置
        background-color: rgba(7, 29, 75, 0.8);
        background-clip: padding-box;
        border-radius: 4px;
    }
    &::-webkit-scrollbar-track-piece {
        //滚动条凹槽的颜色，还可以设置边框属性
        background-color: #10457E;
        border-radius: 4px;
    }
    &::-webkit-scrollbar {
    //滚动条的宽度
    width: 8px;
    height: 8px;
  }
}
</style>
